<template>
  <div class="pages" v-if="pageShow">
    <headerTitle :navTitle="'课件与视频>财务管理课程'"></headerTitle>
    <div class="pages-content">
      <div class="content-table">
        <el-table :data="tableList" border>
          <el-table-column prop="" label="周" width="180" align="center" />
          <el-table-column prop="" label="课" width="180" align="center" />
          <el-table-column prop="" label="章节名称" align="center" />
          <el-table-column
            prop=""
            label="知识目标"
            width="180"
            align="center"
          />
          <el-table-column prop="" label="知识点" align="center" />
        </el-table>
      </div>
      <div class="content-table">
        <div class="table-title">学生完成情况</div>
        <el-table :data="tableData" border>
          <el-table-column
            prop="name"
            label="姓名"
            width="180"
            align="center"
          />
          <el-table-column
            prop="studentNumber"
            label="学号"
            width="180"
            align="center"
          />
          <el-table-column prop="completion" label="完成情况" align="center" />
          <el-table-column
            prop="singleChoiceScore"
            label="单选题1"
            width="180"
            align="center"
          />
          <el-table-column
            prop="multipleChoiceScore"
            label="单选题2"
            align="center"
          />
          <el-table-column
            prop="shortAnswerScore"
            label="简单题"
            align="center"
          />
          <el-table-column label="核心素养评价" align="center">
            <template #default>
              <div class="item-title">点击查看</div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="content-table">
        <div class="table-title">学生完成情况</div>
        <div id="main" style="width: 400px; height: 300px"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import headerTitle from "@/components/headerTitle.vue";
import { toolsList } from "@/request/api";
import { ref, reactive, toRefs, onMounted } from "vue";
import * as echarts from "echarts";
let state = reactive({
  tableData: [],
  tableList: [],
});

let pageShow = ref(false);

function getList() {
  return new Promise((resolve) => {
    toolsList().then((res) => {
      pageShow.value = true;
      let { code, data } = res;
      let radarList = [];
      if (code == 200) {
        state.tableData = data.studentScores;
        data.studentScores.forEach((item) => [
          radarList.push({
            value: item.evaluation,
          }),
        ]);
      }

      resolve(radarList);
      console.log(res, "--re---");
    });
  });
}

const { tableData, tableList } = toRefs(state);
onMounted(async () => {
  let radarList = await getList();
  var chartDom = document.getElementById("main");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    radar: {
      indicator: [
        { name: "财富管理业务的熟悉度", max: 100 },
        { name: "人际交往关系", max: 100 },
        { name: "批评性思想", max: 100 },
        { name: "对经济现象的洞察力", max: 100 },
        { name: "职业道德", max: 100 },
      ],
    },
    series: [
      {
        type: "radar",
        data: radarList,
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style lang="less" scoped>
.pages {
  padding: 20px;
  box-shadow: 0 0 4px 0 #999;
  border-radius: 10px;
  margin: 20px;
  height: calc(100vh - 120px);
  overflow: auto;
  .pages-content {
    .content-table {
      margin-bottom: 20px;
      .table-title {
        margin-bottom: 20px;
        font-weight: 600;
      }
      .item-title {
        color: #1e90ff;
      }
    }
  }
}
</style>
